<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>deBug</title>
    <link rel="stylesheet" href="./es5/ChatArea.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            padding: 20px;
        }

        #msg1 {
            padding: 10px;
            word-break: break-all;
            white-space: pre-wrap;
        }

        #msg1 .at-user {
            margin: 0 1px;
            color: #269AFF;
        }
        #msg1 .at-tag {
            margin: 0 1px;
            color: #269AFF;
        }


        .info {
        	margin-top: 10px;
        	color: #666;
        	font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="info">请尝试在输入框中敲击@键或者#键吧</p>
        <div id="chat"></div>

        <p class="info">消息回显-发送后查看展示效果</p>
        <div id="msg1"></div>

        <p class="info">扩展交互</p>
        <button id="btn1">发送消息</button>
        <button id="btn2">手动插入@人员</button>
        <button id="btn3">控制台打印选中的@人员以及#标签列表</button>
        <button id="btn4">光标处插入图片</button>
        <button id="btn5">光标处插入文本</button>
        <button id="btn6">光标定向最后</button>
        <button id="btn7">光标人员选择</button>
        <button id="btn8">人员多选</button>
        <button id="btn9">将发送的消息回填到聊天框</button>
        <button id="btn10">执行撤销</button>
        <button id="btn13">执行恢复</button>
        <button id="btn11">清空文本框</button>
        <button id="btn12">销毁实例</button>

        <p class="info" style="margin-top: 40px">异步加载模式</p>
        <div id="asyncChat"></div>
    </div>

    <script src="./es5/System.js"></script>
    <script type="systemjs-importmap">
        {
          "imports": {
            "ChatArea": "./es5/ChatArea.js"
          }
        }
    </script>
    <script>
        const initChat = function (ChatArea) {
            const chat = new ChatArea({
                elm: document.getElementById('chat'),
                placeholder: '输入@唤起选择窗，ctrl+enter换行，enter发送',
                userList: [
                    {
                        id: '5',
                        name: '张三丰',
                        avatar: './example/user01.png',
                        pinyin: 'zhang san feng'
                    },
                    {
                        id: '1',
                        name: '张三',
                        pinyin: 'zhang san'
                    },
                    {
                        id: '2',
                        name: '李四',
                        pinyin: 'li si'
                    },
                    {
                        id: '3',
                        name: '王五',
                        pinyin: 'wang wu'
                    },
                    {
                        id: '4',
                        name: '马六',
                        pinyin: 'ma liu'
                    }
                ],
                customTrigger: [ // 自定义弹窗触发符
                    {
                        dialogTitle: '群话题',
                        prefix: '#',
                        tagList: [
                            { id: 'ht1', name: '话题一', pinyin: 'hua ti yi' },
                            { id: 'ht2', name: '话题二', pinyin: 'hua ti er' }
                        ]
                    }
                ]
                // 更多配置请参考文档
            })

            const sendMsg = function () {
                const isEmpty = chat.isEmpty(true)
                if (isEmpty) return;
                document.getElementById('msg1').innerHTML = chat.getHtml({
                    needUserId: true,
                    needTagId: true
                })
            };
            chat.enterSend = function () {
                sendMsg()
            };
            document.getElementById('btn1').onclick = function () {
                sendMsg()
            };
            document.getElementById('btn2').onclick = function () {
                chat.setUserTag({ id: '1', name: '张三' })
            };
            document.getElementById('btn3').onclick = function () {
                console.log('getCallUserList:', chat.getCallUserList())
                console.log('getCallUserTagList:', chat.getCallUserTagList())
                console.log('customTagList:', chat.getCustomTagList())
            };
            document.getElementById('btn4').onclick = function () {
                chat.insertHtml('<img width="auto" height="22px" style="vertical-align: bottom" src="./example/bq01.gif">')
            }
            document.getElementById('btn5').onclick = function () {
                chat.insertText('你好呀！朋友！')
            }
            document.getElementById('btn6').onclick = function () {
                chat.enable()
            }
            document.getElementById('btn7').onclick = function () {
                chat.showPCPointDialog()
            }
            document.getElementById('btn8').onclick = function () {
                chat.showPCCheckDialog()
            }
            document.getElementById('btn9').onclick = function () {
                const sendHtml = document.getElementById('msg1').innerHTML
                if (!sendHtml) return
                chat.reverseAnalysis(sendHtml, true)
            }
            document.getElementById('btn10').onclick = function () {
                chat.undo()
            }
            document.getElementById('btn13').onclick = function () {
                chat.redo()
            }
            document.getElementById('btn11').onclick = function () {
                chat.clear()
            }
            document.getElementById('btn12').onclick = function () {
                chat.dispose()
            }
        };
        
        const initAsyncChat = function (ChatArea) {
            const asyncChat = new ChatArea({
                elm: document.getElementById('asyncChat'),
                placeholder: '本示例接口查询的是github上的用户列表，请随意在@字符后输入点什么吧',
                asyncMatch: true,
                // 转接github的用户列表
                userProps: {
                    name: 'login',
                    avatar: 'avatar_url'
                }
            })

            // 接管匹配
            asyncChat.addEventListener('atMatch', async (str) => {
                // 关闭空字符请求
                if (!str) return []
                const res = await fetch('https://api.github.com/search/users?q=' + str).then(res => res.json())
                // 返回需要渲染的人员列表
                return res?.items ?? []
            })
        }

        System.register(['ChatArea'], function (_export, _context) {
            return {
                setters: [
                    function (target) {
                        initChat(target.C)
                        initAsyncChat(target.C)
                    },
                ],
                execute: function () {
                    _export()
                }
            }
        })
    </script>
</body>
</html>